<!--
 * @Description: 
 * @Author: 王紫琪
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 16:42:47
-->
<template>
  <div ref= "left1" style="height:80%"></div>
</template>
<script>
import { Column } from '@antv/g2plot';


export default {
  data(){
     return{
       dataArr:[
          {
    country: '经典文学',
    year: '1',
    value: 200,
  },
  {
    country: '经典文学',
    year: '3',
    value: 300,
  },
  {
    country: '经典文学',
    year: '5',
    value: 209,
  },
  {
    country: '经典文学',
    year: '7',
    value: 200,
  },
  {
    country: '经典文学',
    year: '9',
    value: 140,
  },
  {
    country: '经典文学',
    year: '11',
    value: 3634,
  },
  {
    country: '经典文学',
    year: '12',
    value: 5268,
  },
  {
    country: '青春文学小说',
    year: '1',
    value: 106,
  },
  {
    country: '青春文学小说',
    year: '3',
    value: 107,
  },
  {
    country: '青春文学小说',
    year: '5',
    value: 111,
  },
  {
    country: '青春文学小说',
    year: '7',
    value: 133,
  },
  {
    country: '青春文学小说',
    year: '9',
    value: 221,
  },
  {
    country: '青春文学小说',
    year: '11',
    value: 767,
  },
  {
    country: '青春文学小说',
    year: '12',
    value: 1766,
  },
  {
    country: '科技创新',
    year: '1',
    value: 163,
  },
  {
    country: '科技创新',
    year: '3',
    value: 203,
  },
  {
    country: '科技创新',
    year: '5',
    value: 276,
  },
  {
    country: '科技创新',
    year: '7',
    value: 408,
  },
  {
    country: '科技创新',
    year: '9',
    value: 547,
  },
  {
    country: '科技创新',
    year: '11',
    value: 729,
  },
  {
    country: '科技创新',
    year: '12',
    value: 628,
  },
       ]
     }
  },
  mounted(){
   this.initChart();
  },


  methods:{
    initChart(){
      const columnPlot = new Column(this.$refs.left1,{
      data:this.dataArr,
      xField: 'year',
      yField: 'value',
      seriesField: 'country',
      isPercent: true,
     isStack: true,
     label: {
    position: 'middle',
    content: (item) => {
      return item.value.toFixed(2);
    },
  },
    });

    columnPlot.render();
    },
  }
}
</script>
<style scoped>
</style>